<template>
  <div class="app">
    <h1>我是App组件(祖)</h1>

    <h1>汽车: {{ name }}--{{ price }}</h1>
    <Child/>
  </div>
</template>

<script>
import Child from "./components/Child"
import { toRefs,provide, reactive } from 'vue';
export default {
  name: "App",
  components:{
    Child
  },
  setup(){
    const car =reactive({
      name:"宝马",
      price:40
    })
    provide("car",car)
    return { ...toRefs(car)}
  }
};
</script>

<style>
.app{
  background-color: gray;
  padding: 10px;
}
</style>